<!--
 * @Description: 
 * @Author: HKH
 * @Date: 2024-11-14 11:01:19
 * @LastEditors: HKH
 * @LastEditTime: 2024-11-14 11:01:35
-->
<template>
    {{ fontSize }}
    <div :style="{ 'font-size': fontSize + 'px' }">
      <!-- num:{{ num }} -->
      count:{{ count }}
      <button @click="count++">count++</button>
      <button @click="childAddFont">fontSize++</button>
      <button @click="fontSize--">fontSize--</button>
    </div>
  </template>
  <!-- js -->
  <script setup>
  import { ref } from 'vue';
  const count = ref(0);
  const fontSize = ref(20);
  const props = defineProps(['num']);
  count.value = props.num;
  function childAddFont () {
    fontSize.value++;
  }
  // 暴露方法给父组件
  defineExpose({ childAddFont });
  </script>
  <!-- 样式 -->
  <!-- scoped是为了当前组件的样式不要影响其他组件 -->
  <style scoped></style>